<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商城</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/index.css" type="text/css">
    <link rel="stylesheet" href="style/bottomnav.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/header.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios-min.js"></script>
    <script src="js/mock-min.js"></script>
    <script src="js/api.js"></script>
    <script src="js/mock.js"></script>
    <script src="components/topnav.js"></script>
    <script src="components/cephalosome.js"></script>
    <script src="components/newsflash.js"></script>
    <script src="components/colligate.js"></script>
    <script src="components/floor.js"></script>


</head>
<body>
<div id="app">
    <!-- 顶部导航 start -->
    <topnav_topnav></topnav_topnav>
    <!-- 顶部导航 end -->

    <div style="clear:both;"></div>

    <!-- 头部 start -->
    <div class="header w1210 bc mt15">
        <!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
        <div class="logo w1210">
            <h1 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城"></a></h1>
            <!-- 头部搜索 start -->
            <cephalosome_navitems_search></cephalosome_navitems_search>
            <!-- 头部搜索 end -->

            <!-- 用户中心 start-->
            <cephalosome_navitems_user></cephalosome_navitems_user>
            <!-- 用户中心 end-->

            <!-- 购物车 start -->
            <cephalosome_navitems_cart></cephalosome_navitems_cart>
            <!-- 购物车 end -->
        </div>
        <!-- 头部上半部分 end -->

        <div style="clear:both;"></div>

        <!-- 导航条部分 start -->
        <div class="nav w1210 bc mt10">
            <!--  商品分类部分 start-->
            <div class="category fl"> <!-- 非首页，需要添加cat1类 -->
                <div class="cat_hd">  <!-- 注意，首页在此div上只需要添加cat_hd类，非首页，默认收缩分类时添加上off类，鼠标滑过时展开菜单则将off类换成on类 -->
                    <h2>全部商品分类</h2>
                    <em></em>
                </div>

                <!--菜单 start -->
                <div class="cat_bd">
                    <cephalosome_navitems_body></cephalosome_navitems_body>
                </div>
                <!--菜单 end -->

            </div>
            <!--  商品分类部分 end-->

            <cephalosome_navitems></cephalosome_navitems>
        </div>
        <!-- 导航条部分 end -->
    </div>
    <!-- 头部 end-->


    <div style="clear:both;"></div>

    <!-- 综合区域 start 包括幻灯展示，商城快报 -->
    <colligate_colligate></colligate_colligate>
    <!-- -综合区域 end -->

    <div style="clear:both;"></div>

    <!-- 导购区域 start -->
    <div class="guide w1210 bc mt15">
        <!-- 导购左边区域 start -->
        <div class="guide_content fl">
            <h2>
                <span class="on">疯狂抢购</span>
                <span>热卖商品</span>
                <span>推荐商品</span>
                <span>新品上架</span>
                <span class="last">猜您喜欢</span>
            </h2>

            <div class="guide_wrap">

                <!-- 疯狂抢购 start-->
                <div class="crazy">
                    <ul>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/crazy1.jpg" alt=""/></a></dt>
                                <dd><a href="">惠普G4-1332TX 14英寸</a></dd>
                                <dd><span>售价：</span><strong> ￥2999.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/crazy2.jpg" alt=""/></a></dt>
                                <dd><a href="">直降100元！TCL118升冰箱</a></dd>
                                <dd><span>售价：</span><strong> ￥800.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/crazy3.jpg" alt=""/></a></dt>
                                <dd><a href="">康佳液晶37寸电视机</a></dd>
                                <dd><span>售价：</span><strong> ￥2799.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/crazy4.jpg" alt=""/></a></dt>
                                <dd><a href="">梨子平板电脑7.9寸</a></dd>
                                <dd><span>售价：</span><strong> ￥1999.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/crazy5.jpg" alt=""/></a></dt>
                                <dd><a href="">好声音耳机</a></dd>
                                <dd><span>售价：</span><strong> ￥199.00</strong></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <!-- 疯狂抢购 end-->

                <!-- 热卖商品 start -->
                <div class="hot none">
                    <ul>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/hot1.jpg" alt=""/></a></dt>
                                <dd><a href="">索尼双核五英寸四核手机！</a></dd>
                                <dd><span>售价：</span><strong> ￥1386.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/hot2.jpg" alt=""/></a></dt>
                                <dd><a href="">华为通话平板仅需969元！</a></dd>
                                <dd><span>售价：</span><strong> ￥969.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/hot3.jpg" alt=""/></a></dt>
                                <dd><a href="">卡姿兰明星单品7件彩妆套装</a></dd>
                                <dd><span>售价：</span><strong> ￥169.00</strong></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <!-- 热卖商品 end -->

                <!-- 推荐商品 atart -->
                <div class="recommend none">
                    <ul>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/recommend1.jpg" alt=""/></a></dt>
                                <dd><a href="">黄飞红麻辣花生整箱特惠装</a></dd>
                                <dd><span>售价：</span><strong> ￥139.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/recommend2.jpg" alt=""/></a></dt>
                                <dd><a href="">戴尔IN1940MW 19英寸LE</a></dd>
                                <dd><span>售价：</span><strong> ￥679.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/recommend3.jpg" alt=""/></a></dt>
                                <dd><a href="">罗辑思维音频车载CD</a></dd>
                                <dd><span>售价：</span><strong> ￥24.80</strong></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <!-- 推荐商品 end -->

                <!-- 新品上架 start-->
                <div class="new none">
                    <ul>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/new1.jpg" alt=""/></a></dt>
                                <dd><a href="">E路航T70超薄GPS 7寸大屏！</a></dd>
                                <dd><span>售价：</span><strong> ￥369.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/new2.jpg" alt=""/></a></dt>
                                <dd><a href="">乐和居 爆品 特价疯狂抢</a></dd>
                                <dd><span>售价：</span><strong> ￥2799.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/new3.jpg" alt=""/></a></dt>
                                <dd><a href="">北欧 套装 抄底再续最后几小时</a></dd>
                                <dd><span>售价：</span><strong> ￥999.00</strong></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <!-- 新品上架 end-->

                <!-- 猜您喜欢 start -->
                <div class="guess none">
                    <ul>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/guess1.jpg" alt=""/></a></dt>
                                <dd><a href="">Thinkpad USB光电鼠标</a></dd>
                                <dd><span>售价：</span><strong> ￥39.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/guess2.jpg" alt=""/></a></dt>
                                <dd><a href="">宜客莱（ECOLA）电脑散热器</a></dd>
                                <dd><span>售价：</span><strong> ￥89.00</strong></dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/guess3.jpg" alt=""/></a></dt>
                                <dd><a href="">巴黎欧莱雅男士洁面膏 100ml</a></dd>
                                <dd><span>售价：</span><strong> ￥30.00</strong></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <!-- 猜您喜欢 end -->


            </div>

        </div>
        <!-- 导购左边区域 end -->

        <!-- 侧栏 网站首发 start-->
        <floor_first></floor_first>
        <!-- 侧栏 网站首发 end -->

    </div>
    <!-- 导购区域 end -->

    <div style="clear:both;"></div>

    <!--1F 电脑办公 start -->
    <div v-for="type in  lists" class="floor1 floor w1210 bc mt10">
        <!-- 1F 左侧 start -->
        <div class="floor_left fl">
            <!-- 商品分类信息 start-->
            <floor_cate :floor_name="type.floor_name"
                        :sub_categorys="type.sub_categorys"
                        :left_ad="type.left_ad">
            </floor_cate>
            <!-- 商品分类信息 end-->

            <!-- 商品列表信息 start-->
            <floor_goodslist :rec_goods="type.rec_goods"
                             :rec_categorys="type.rec_categorys">
            </floor_goodslist>
            <!-- 商品列表信息 end-->
        </div>
        <!-- 1F 左侧 end -->

        <!-- 右侧 start -->
        <div class="sidebar fl ml10">
            <!-- 品牌旗舰店 start -->
            <floor_brand :brands="type.brands">

            </floor_brand>

            <!-- 品牌旗舰店 end -->

            <!-- 分类资讯 start -->
            <floor_info :news="type.news"></floor_info>

            <!-- 分类资讯 end -->

            <!-- 广告 start -->
            <floor_ads :right_ad="type.right_ad"></floor_ads>
            <!-- 广告 end -->
        </div>
        <!-- 右侧 end -->
    </div>
    <!--1F 电脑办公 end -->

    <div style="clear:both;"></div>

    <!-- 底部导航 start -->
    <topnav_bottomnav></topnav_bottomnav>
    <!-- 底部导航 end -->

    <div style="clear:both;"></div>
    <!-- 底部版权 start -->
    <topnav_bottom></topnav_bottom>
    <!-- 底部版权 end -->
</div>


<script>
    var vm = new Vue({
        el: "#app",
        data: {
            lists: [],
        },
        created() {
            // 初始化页面代码
            getFloors().then(res => {
                this.lists = res.data.data

            })
        },
        updated: function () {

            $(".cat").hover(function () {
                $(this).find(".cat_detail").show();
                $(this).find("h3").addClass("on");
            }, function () {
                $(this).find(".cat_detail").hide();
                $(this).find("h3").removeClass("on");
            });
            $(".goodslist h2 span").mouseover(function () {
                $(this).addClass("on").siblings().removeClass("on");
                $(this).parent().next(".goodslist_wrap").find("div").hide().eq($(this).index()).show();

            });

            $(function(){
                //右侧，话费、旅行、彩票、游戏切换效果
                $(".service h2 span").mouseover(function(){
                    $(this).addClass("on").siblings().removeClass("on");
                    $(".service_wrap div").hide().eq($(this).index()).show();

                });

                //导购区域切换效果，疯狂抢购，热卖商品、推荐商品、新品上架，猜您喜欢
                $(".guide_content h2 span").mouseover(function(){
                    $(this).addClass("on").siblings().removeClass("on");
                    $(".guide_wrap div").hide().eq($(this).index()).show();

                });

                //各楼层区域切换
                $(".goodslist h2 span").mouseover(function(){
                    $(this).addClass("on").siblings().removeClass("on");
                    $(this).parent().next(".goodslist_wrap").find("div").hide().eq($(this).index()).show();

                });

                //首页幻灯片效果
                var len = $(".slide_items li").size(); //获取图片的数目
                var init = 1; //设置图片切换初始值，从第二张开始
                var dt = null; //设置定时器

                //定义一个函数完成动画
                function slide(){
                    dt = setInterval(function(){
                        //大图切换
                        $(".slide_items li").stop(true,false).fadeOut().eq(init).fadeIn();
                        //数字索引切换
                        $(".slide_controls li").removeClass("on").eq(init).addClass("on");
                        init++;
                        if (init >= len ){
                            init = 0;
                        }
                    },5000)
                }


                //调用函数，实现动画
                slide();

                //鼠标放置在图片上则停止幻灯,离开则继续
                $(".slide_items li").mouseover(function(){
                    clearInterval(dt);
                }).mouseout(function(){
                    slide();
                });

                //鼠标放置到数字索引上时，立即切换到该图片上,并停止动画，离开则继续
                $(".slide_controls li").mouseover(function(){
                    clearInterval(dt);
                    init = $(this).index();
                    $(".slide_items li").stop(true,false).fadeOut().eq(init).fadeIn();
                    init++;
                    $(this).addClass("on").siblings().removeClass("on");
                }).mouseout(function(){
                    slide();
                });
            });
        },
        methods: {}
    })
</script>
</body>
</html>